<%--
  Created by IntelliJ IDEA.
  User: anzhicheng
  Date: 2017/7/15
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        body{margin: 0px}
        a{text-decoration:none}
        .banner {
            width:100%;
            height:70px;
            top:0px;
            left:0px;
            position: relative;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: relative;
            top: -75px;
            left: 200px;
            height: 40px;
            width: 224px;
            border: 0px;
        }
        #search {
            position: relative;
            top: 30px;
            left: 0px;
            width: 224px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            font-size: 13px;
            background-color: transparent;
        }
        #searchicon{
            position: relative;
            bottom: 0px;
            left: 195px;
            width: 28px;
            height: 28px;
        }
        #btnLeft{
            width: 235px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #hpBtn{
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        .left{
            margin-left: 10%;
            margin-top:20px;
            width:766px;
            height:auto;
        }
        .list{
            margin-top:0px;
            width:140px;
        }
        #recommend,#equity,#block3,#block4{
            width: 100%;
            height: 40px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        .passage-block{
            position: absolute;
            width:626px;
            height:auto;
            top:90px;
            left: 274px;
            border: 1px solid #999999;
            border-radius: 3px;
        }

        .right{
            position:absolute;
            top:90px;
            left:928px;
            width: 22%;
            height: 440px;
        }
        .personBlock{
            float: right;
            width: 320px;
            height: 440px;
            border: 1px solid #999999;
            border-radius: 3px;
            text-align: center;
        }
        #avatar{
            border: 5px solid aliceblue;
            border-radius:50%;
            width: 120px;
            height: 120px;
        }
        #avatarDiv{
            margin-top: 40px;
            text-align: center;
        }
        .personFont{
            font: normal 18px 微软雅黑;
        }
        #post{
            text-align: center;
            margin-top: 50px;
            width: 120px;
            height: 40px;
            border: 1px solid #999999;
            border-radius: 3px;
            background-color: white;
            font: 15px 微软雅黑;
            color: #666666;
        }
    </style>

    <script>
        function showAtRight(btn){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("passageArea").innerHTML = xmlhttp.responseText;
                }
            }
            var invalue = btn.value;
            if (isNaN(invalue)){
                xmlhttp.open("GET","postContent.jsp?category="+btn.value+"&need=allpost",true);
            }else {
                xmlhttp.open("GET","postContent.jsp?targetPage="+btn.value+"&need=allpost",true);
            }
            xmlhttp.send();
        }


    </script>

</head>
<body>

<div class="banner">
    <img src="img/logologin.png" id="logo"/>
    <div class="searchDiv">
        <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
        <a href="" onclick="searchPost()"><img src="img/搜索.png" id="searchicon" /></a>
    </div>
    <div id="btnLeft">
        <input type="button" name="homepage" id="hpBtn" value="个人中心">
        <input type="button" name="homepage" id="ppBtn" value="首页">
    </div>
</div>

<div class="left">
    <div class="list">
        <input type="button"  id="recommend" value="推荐"  onclick="showAtRight(this)">
        <input type="button"  id="equity" value="权益"  onclick="showAtRight(this)">
        <input type="button"  id="block3" value="XXX" onclick="showAtRight(this)">
        <input type="button"  id="block4" value="XXX" onclick="showAtRight(this)">
    </div>


    <!--下面的Div来展示四个bankuai的帖子内容，id为passageArea-->
    <div class="passage-block" id="passageArea">




    </div>
</div>

<div class="right">
    <div class="personBlock">
        <div id="avatarDiv">
            <img src="头像示例.jpg" id="avatar">
        </div>
        <div>
            <br>
            <t class="personFont"><%=request.getSession().getAttribute("username") %></t><br><br>
            <t class="personFont">粉丝：</t><t  class="personFont" id="fansNum">33</t><br>
            <t class="personFont">关注：</t><t class="personFont" id="followNum" >33</t>
        </div>
        <input type="button" name="post" id="post" value="发帖子"><br>
    </div>
</div>

</body>
</html>

